<template>
   <div class="menumain">
       <div class="menubox">
           <div style="display:flex;width:530px;">
               <div class="groupstyle" style="border-radius: 5px 0 0 5px;width:140px;" @click="netwark"> <i class="el-icon-edit"></i>  目标网络</div>
                <div class="groupstyle" style="position:relative;" @mouseover="mouseover()" @mouseout='mouseout()'  > 
                    <i class="el-icon-share"></i> 
                    视觉
                    <el-cascader-panel :options="options" v-show="showbox" class="cascaderpo" :props="{multiple:true,expandTrigger:'hover'}"  style=" z-index:999;"></el-cascader-panel>
                    </div>
                    <el-dropdown style="width:110px;">
                        <div class="groupstyle"  style="width:110px;" > 
                            <span class="el-dropdown-link" style="color:#fff;">
                                <i class="el-icon-copy-document"></i>  层级
                            </span>
                        <el-dropdown-menu slot="dropdown" style="background: #153454;color:#fff!important;border: 1px solid #153454;" class="dropdownstyle">
                            <el-dropdown-item>物理层</el-dropdown-item>
                            <el-dropdown-item>逻辑层</el-dropdown-item>
                            <el-dropdown-item>角色层</el-dropdown-item>
                        </el-dropdown-menu>
                        </div>
                        
                    </el-dropdown>
                    <el-dropdown>
                        <div class="groupstyle" > 
                            <span class="el-dropdown-link" style="color:#fff;">
                               <i class="el-icon-menu"></i>  工具箱
                            </span>
                        <el-dropdown-menu slot="dropdown" style="background: #153454;color:#fff!important;border: 1px solid #153454;" class="dropdownstyle">
                            <el-dropdown-item>测距</el-dropdown-item>
                            <el-dropdown-item>标记</el-dropdown-item>
                            <el-dropdown-item @click="imgdownload">截图</el-dropdown-item>
                        </el-dropdown-menu>
                        </div>
                        
                    </el-dropdown>
                <el-button style="height:37px;padding:0 15px;margin-left:10px;" icon="el-icon-more" ></el-button>
           </div>
           <div class="cardbox" v-show="netwarkbox">
               <div class="cardboxtop">
                   <span>目标网络</span>
                   <i class="el-icon-close" style="line-height:35px;cursor:pointer;" @click="netwarkbox=false"></i>
               </div>
               <div class="cardboxbottom" >
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="color:#fff!important;">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" >
                        <el-checkbox style="color:#fff!important;width:27%;margin-top:5px;" v-for="(city,index) in cities" :label="city" :key="city+index">{{city}}</el-checkbox>
                    </el-checkbox-group>
               </div>
            </div>
            <div class="cardbox" v-show="netwarkbox">
               <div class="cardboxtop">
                   <span>网络</span>
                   <i class="el-icon-close" style="line-height:35px;cursor:pointer;" @click="netwarkbox=false"></i>
               </div>
               <div class="cardboxbottom" >
                    <el-row>
                        <el-col :span="8" class="networkstyle">网络名称：xxx网络</el-col >
                        <el-col :span="8" class="networkstyle">网络类型：JS网</el-col >
                        <el-col :span="8" class="networkstyle">节点数量：216</el-col >
                        <el-col :span="8" class="networkstyle">链路数量：267</el-col >
                        <el-col :span="8" class="networkstyle">节点数量：216</el-col >
                        <el-col :span="8" class="networkstyle">链路数量：267</el-col >
                    </el-row>>
               </div>
            </div>
       </div>
       
    </div>
</template>

<script lang="ts">
import  {Component ,Vue} from 'vue-property-decorator'
@Component({})
export default class asfasd extends Vue {
    private showbox:boolean = false
    private props:any= { multiple: true }

    private netwarkbox:boolean=false
    private options:Array<any>= [{
          value: 'zhinan',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
          }, {
            value: 'daohang',
            label: '导航',
          }]
        },{
          value: 'zujian',
          label: '组件',
          children: [{
            value: 'basic',
            label: 'Basic',
          }, {
            value: 'form',
            label: 'Form',
          }, {
            value: 'data',
            label: 'Data',
          }, {
            value: 'notice',
            label: 'Notice',
          }, {
            value: 'navigation',
            label: 'Navigation',
          }, {
            value: 'others',
            label: 'Others',
          }]
        },{
          value: 'ziyuan',
          label: '资源',
          children: [{
            value: 'axure',
            label: 'Axure Components'
          }, {
            value: 'sketch',
            label: 'Sketch Templates'
          }, {
            value: 'jiaohu',
            label: '组件交互文档'
          }]
        }]
        //  const cityOptions = ['上海', '北京', '广州', '深圳'];
    private checkAll:boolean = false
    private checkedCities:Array<string> = []
    private cities:Array<string>= ['上海', '北京', '广州', '深圳','上海', '北京', '广州', '深圳'];
    private isIndeterminate:boolean = true

    private netFeatures:Array<any>= [
          {
            index: 0,
            type: 'Point',
            name: `xxxxxxx光纤站1`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            point: [116.403874, 39.932153]
          },
          {
            index: 1,
            type: 'Point',
            name: `xxxxxxx光纤站2`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            point: [100.403874, 34.932153]
          },
          {
            index: 2,
            type: 'Point',
            name: `xxxxxxx光纤站3`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            point: [112.403874, 30.932153]
          },
          {
            index: 3,
            type: 'Point',
            name: `xxxxxxx光纤站4`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            point: [119.403874, 29.932153]
          },
          {
            index: 4,
            type: 'Point',
            name: `xxxxxxx光纤站5`,
            description: '江苏省南京市江宁区秣周动路12号2栋328室',
            point: [110.403874, 39.932153]
          },
          {
            index: 5,
            type: 'LineString',
            point: [[116.403874, 39.932153], [100.403874, 34.932153]]
          },
          {
            index: 6,
            type: 'LineString',
            point: [[100.403874, 34.932153], [112.403874, 30.932153]]
          },
          {
            index: 7,
            type: 'LineString',
            point: [[119.403874, 29.932153], [110.403874, 39.932153]]
          },
          {
            index: 8,
            type: 'LineString',
            point: [[112.403874, 30.932153], [110.403874, 39.932153]]
          }
        ]


    private mouseover(){
        this.showbox=true
    }
    private mouseout(){
        console.log(1111)
        this.showbox=false
    }

    //网络多选框   点击事件
    private handleCheckAllChange(val:any) {
        this.checkedCities = val ? this.cities : [];
        this.isIndeterminate = false;

        const featuresJson:any = {
          type: 'FeatureCollection',
          crs: {
            type: 'name',
            properties: {
              name: 'EPSG:4326'
            }
          },
          features: []
        }

        for (const item of this.netFeatures) {
          if (item.type === 'Point') {
            featuresJson.features.push({
              id: item.index,
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: item.point
              },
              properties: item
            })
          } else if (item.type === 'LineString') {
            featuresJson.features.push({
              id: item.index,
              type: 'Feature',
              geometry: {
                type: 'LineString',
                coordinates: item.point
              }
            })
          }
        }

        this.$bus.$emit('mapdata',featuresJson)
        
    }
    private handleCheckedCitiesChange(value:any) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    }

    private netwark(){
        this.netwarkbox=true
    }
    private imgdownload(){
        // this.$bus.$emit('img-download')
    }

}

</script>

<style lang="scss">
    .menumain{
        z-index: 999;
        width: 535px;
        // height:100px;
        .el-cascader-menu__list{
            background:#fff;
        }
        .menubox{
             
            .cardbox{
                margin-top: 10px;
                font-size: 16px;
               
                .cardboxtop{
                    height: 35px;
                    color: #fff;
                    border: 1px solid #448dcc !important;
                    box-shadow: inset 0 0 25px 0 rgba(79, 170, 255, 0.6) !important;
                    border-radius: 3px 3px 0 0;
                    padding: 0 12px;
                    display: flex;
                    justify-content: space-between;
                    line-height: 35px;;
                    background:#153454!important;
                }
                .cardboxbottom{
                    background:#153454!important;
                    padding: 10px;
                    border: 1px solid #448dcc !important;
                    border-radius: 0 0 3px 3px;
                }
                .networkstyle{
                    color:#fff;
                    font-size: 16px;
                    margin-top: 10px;
                }
            }
        }
        
        .el-button{
            background: transparent!important;
            color: #fff;
            border: 1px solid #448dcc !important;
            box-shadow: inset 0 0 25px 0 rgba(79, 170, 255, 0.6) !important;
        }
        .groupstyle{
            height: 35px;
            background: transparent!important;
            color: #fff;
            border: 1px solid #448dcc !important;
            box-shadow: inset 0 0 25px 0 rgba(79, 170, 255, 0.6) !important;
            font-size: 16px;
            line-height: 35px;
            // padding: 0 10px;
            text-align: center;
            width: 110px;
            cursor: pointer;
            
        }
        .cascaderpo{
            position: absolute;
            top: 36px;
            left: 0;
        }
        .el-cascader-panel.is-bordered{
            border:1px solid #174392!important;
        }
        li:hover{
            background:#153454!important;
            color: #409EFF;
        }
        li{
            background:#153454!important;
        }
    }
    .menumain .el-cascader-menu__list{
        
        background:#153454!important;
        color: #fff;
    }
    .el-cascader-node .in-active-path{
            background:#153454!important;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    .el-dropdown-menu__item{
        color:#fff!important;
    }
    .el-dropdown-menu{
        width: 110px;

        li{
            background:#153454!important;
        }
        li:hover{
        background:#153454!important;
        color: #409EFF!important;
        }
            
    }
</style>